<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>我的评价</title>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
</head>
<style>
.mui-preview-image.mui-fullscreen {position: fixed; z-index: 20; background-color: #000; }
.mui-preview-header, .mui-preview-footer {position: absolute; width: 100%; left: 0; z-index: 10; }
.mui-preview-header {height: 44px; top: 0; }
.mui-preview-footer {height: 50px; bottom: 0px; }
.mui-preview-header .mui-preview-indicator {display: block; line-height: 25px; color: #fff; text-align: center; margin: 15px auto 4; width: 70px; background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px; } 
.mui-preview-image {display: none; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn; animation-name: fadeIn; }
.mui-preview-image.mui-preview-out {background: none; -webkit-animation-name: fadeOut; animation-name: fadeOut; }
.mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer {display: none; }
.mui-zoom-scroller {position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; } 
.mui-zoom {-webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.mui-slider .mui-slider-group .mui-slider-item img {width: auto; height: auto; max-width: 100%; max-height: 100%; }
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%; }
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table; }
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell; vertical-align: middle; }
.mui-preview-loading {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; }
.mui-preview-loading.mui-active {display: block; }
.mui-preview-loading .mui-spinner-white {position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; height: 50px; width: 50px; }
.mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; }
@-webkit-keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
@keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
@-webkit-keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
@keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
p img {max-width: 100%; height: auto; }
.mui-content{padding-top: 47px;padding-bottom: 0}
.noevaluation{height: 100vh;background: url('/static/wechat/img/noevaluation.png') no-repeat;background-size: 55%;background-position: center;}
.fit{width: 100%;height: 47px;position: fixed;top: 0;left: 0;z-index: 19;background: #fff;border-bottom: 1px solid  #eee}
.fit dl{width: 20%;float: left;text-align: center;}
.fit dl dt{height: 25px;line-height: 25px;font-size: 16px}
.fit dl dd{height: 20px;line-height: 20px;font-size: 14px;color:#888;}
.fit .fit_active{color: #e31939;border-bottom: 2px solid #e31939}
.fit .fit_active dd{color: #e31939}
.pl:nth-last-child(1) ol{border: 0}
.pj-message div ul li{width: 25% !important;height: calc(25vw - 5px)!important}
.pjw{float: left;}
</style>
<body class="myevaluate">
<div class="fit">
	<dl class="fit_active" data-status="0">
		<dt>全部</dt>
		<dd>{{.all}}</dd>
	</dl>
	<dl data-status="1">
		<dt>好评</dt>
		<dd>{{.good}}</dd>
	</dl>
	<dl data-status="2">
		<dt>中评</dt>
		<dd>{{.middle}}</dd>
	</dl>
	<dl data-status="3">
		<dt>差评</dt>
		<dd>{{.nogood}}</dd>
	</dl>
	<dl data-status="4">
		<dt>晒单</dt>
		<dd>{{.pic}}</dd>
	</dl>
</div>
<div class="pj-message mui-content">
	{{range $k,$v:=.info}}
	<div class="pl" data-score="{{$v.score}}" data-pic="{{if $v.imgs}}1{{else}}0{{end}}">
		<div class="header">
			<img class="pic" src="{{$v.pathname}}">
			<dt class="overpl1" style="color:#5A6793;">{{$v.monicker}}</dt>
			{{if eq $v.score "5"}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/5x.png">
			{{else if eq $v.score "4"}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/4x.png">
			{{else if eq $v.score "3"}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/3x.png">
			{{else if eq $v.score "2"}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/2x.png">
			{{else if eq $v.score "1"}}
			<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/1x.png">
			{{end}}
		</div>
		<div>
			<p class="overpl2">{{$v.content}}</p>
			<ul>
				{{range $v.imgs}}
				<li class="pjw"><img src="{{.pathname}}" data-preview-src="" data-preview-group="{{$v.id}}"></li>
				{{end}}
			</ul>
			<dl class="prd goto" href="/mobile/column/product_content?id={{$v.pid}}">
				<dt style="background-image: url({{$v.ppath}});"></dt>
				<dd>{{$v.title}}</dd>
				<dd>&yen;{{$v.price}}</dd>
			</dl>
			<ol style="color: #999"><i class="iconfont">&#xe7b4;</i> {{$v.addtime}}</ol>
		</div>
	</div>
	{{end}}
</div>
</body>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.zoom.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.previewimage.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
{{template "wechat/public/share.html" .}}
<script type="text/javascript">
	var status=0;
    $('.fit dl').click(function(){
    	if($(this).attr('class')=="fit_active"){
    		return
    	}
    	status=$(this).attr('data-status')
    	$('.fit dl').attr('class',"")
    	$(this).attr('class',"fit_active")
    	fitchange()
    })
    var pjw =document.getElementsByClassName('pjw');
    for (var i = 0; i < pjw.length; i++) {
    	pjw[i].style.height=pjw[i].offsetWidth+'px';
    }
    $('.goto').click(function(){
    	var ur=$(this).attr('href')
    	if(ur){
    		window.location.href=ur
    	}
    })
    function fitchange(){
    	switch(status){
    		case "0":
    		$('.pl').css('display','block');
    		break;
    		case "1":
    		$('.pl').each(function(){
    			var score=$(this).attr('data-score')
    			if(score==4||score==5){
    				$(this).css('display','block');
    			}else{
    				$(this).css('display','none');
    			}
    		});
    		break;
    		case "2":
    		$('.pl').each(function(){
    			var score=$(this).attr('data-score')
    			if(score==3){
    				$(this).css('display','block');
    			}else{
    				$(this).css('display','none');
    			}
    		});
    		break;
    		case "3":
    		$('.pl').each(function(){
    			var score=$(this).attr('data-score')
    			if(score==2||score==1){
    				$(this).css('display','block');
    			}else{
    				$(this).css('display','none');
    			}
    		});
    		break;
    		case "4":
    		$('.pl').each(function(){
    			var pic=$(this).attr('data-pic')
    			if(pic==1){
    				$(this).css('display','block');
    			}else{
    				$(this).css('display','none');
    			}
    		});
    		break;
    	}
    }
</script>
<script>
	mui.previewImage();
		var page=2
$('.element').dropload({
    scrollArea : window,
    threshold: 2,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: window.location.href,
            dataType: 'json',
            data:{page:page},
            success: function(data){
               page+=1
               var res=data.info
              if(res){
                 for (var i=0;i<res.length;i++){
                    var div = document.createElement('div');
                    div.className="pl"	
                    div.setAttribute('data-score',res[i].score)
                    if(res[i].imgs){
                   	 	div.setAttribute('data-pic',1)	
                    }else{
                   	 	div.setAttribute('data-pic',0)	
                    }
 					var	html=`<div class="header"> <img class="pic" src="`+res[i].pathname+`">
						<dt class="overpl1" style="color:#5A6793;">`+res[i].monicker+`</dt>`
						if(res[i].score=="5"){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/5x.png">`
						}else if(res[i].score=="4"){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/4x.png">`
						}else if(res[i].score=="3"){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/3x.png">`
						}else if(res[i].score=="2"){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/2x.png">`
						}else if(res[i].score=="1"){
							html+=`<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/prd/1x.png">`
						}
					html+=` </div> <div> <p class="overpl2">`+res[i].content+`</p>`
						if(res[i].imgs){
							html+=`<ul class="mui-content-padded">`
							for(var j=0;j<res[i].imgs.length;j++){
								html+=`<li class="pjw"><img src="`+res[i].imgs[j].pathname+`" data-preview-src="" data-preview-group="`+res[i].id+`"></li>`
							}
							html+=`</ul>`
						}
						html+=`<dl class="prd goto" href="/mobile/column/product_content?id=`+res[i].pid+`">
							<dt style="background-image: url(`+res[i].ppath+`);"></dt>
							<dd>`+res[i].title+`</dd>
							<dd>&yen;`+res[i].price+`</dd>
						</dl><ol style="color:#999"><i class="iconfont">&#xe7b4;</i> `+res[i].addtime+`</ol> </div>`
                    div.innerHTML=html
                    document.getElementsByClassName('mui-content')[0].appendChild(div)
                }
                fitchange()
                me.resetload();
                }else{
                    mui.toast("没有更多了！");
                    $(".dropload-down").remove();
                }
            },
            error: function(xhr, type){
                mui.toast("网络慢，请重新刷新!");
                me.resetload();
            }
        });
    }
});
</script>
</html>
